<template>
	<view class="content">
		<view class="top flexc">
			<view class="score">386</view>
			<view class="avaliable">可用积分</view>
			<segment class="segment" color="#FFEBC0" :segs="segs" v-model="segIndex"></segment>
		</view>
		<view class="scroll-view">
			<view class="item flexr align-center" v-for="(item, index) in 30" :key="index">
				<view class="flexc flex-1 overflow-hidden">
					<view class="title-item">消费</view>
					<view>积分流水号: HLS26082307300082</view>
					<view class="time-item">2023-07-30  20:58:50</view>
				</view>
				<view class="score-item">
					251
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, watch } from "vue";
import segment from "@/widgets/segment.vue"
const segs = ref(['积分明细','积分规则','积分商城'])
const segIndex = ref(0)
watch(segIndex, (newVal) => {
	if (newVal == 1) {
		uni.navigateTo({
			url:"/pages/my/integral_role",
		})
	} else if (newVal == 2) {
		uni.navigateTo({
			url:"/pages/my/integral_mall",
		})
	}
})
</script>

<style lang="scss">
.content {
	background-color: white;
	.top {
		height: 384rpx;
		background-color: black;
		padding: 32rpx;
		.score {
			font-size: 88rpx;
			color: #FFEBC0;
			margin-top: 4rpx;
			align-self: center;
		}
		.avaliable {
			color: #FFEBC0;
			align-self: center;
			margin-top: 5rpx;
		}
		.segment {
			margin-top: 67rpx;
		}
	}
	.scroll-view {
		flex: 1;
		overflow-y: scroll;
		padding: 32rpx;
		padding-top: 12rpx;
		.item {
			border-bottom: 2rpx solid $divider-color;
			padding-bottom: 20rpx;
			padding-top: 20rpx;
		}
		.title-item {
			font-size: 32rpx;
			margin-bottom: 10rpx;
		}
		.time-item {
			font-size: 24rpx;
			color: $text-color2;
		}
		.score-item {
			color: #E9A868;
			font-size: 48rpx;
			margin-top: 4rpx;
		}
	}
}
</style>
